<template>
  <div class="bgc">
    <!-- 流水贷logo -->
    <div class="logo">
        <img src="../../assets/lnnx/liushuidai.png" style="width:100%" alt="">
        <!-- <img src="../../assets/lnnx/icon1.png" alt=""> -->
        <!-- <div class="icon"></div> -->
    </div>
    <!-- 最高可贷 -->
    <div class="btn">
        <div class="title">
            最高可贷(元)
        </div>
        <div class="aum">
            3,000,000
        </div>
        <div class="text">
            <div>利率低至 4.00%</div>
            <div>信用模式</div>
            <div>先息后本</div>
        </div>
        <div class="submit" @click="toproduct">
            立即申请
        </div>
    </div>
    <!-- 产品详情 -->
    <div class="introduce">
        <!-- 产品介绍 -->
        <div class="introduce_first">
            <img src="../../assets/lnnx/icon3.png" style="height:2rem" alt="">
            <div style="margin:0 1rem">产品介绍</div>
            <img src="../../assets/lnnx/icon4.png" style="height:2rem" alt="">
        </div>
        <!-- 介绍详情 -->
        <!-- <div class="introduce_sec"> -->
            <!-- <div class="icon5">
                <img src="../../assets/lnnx/icon5.png" style="width:100%;height:100%" alt="">
            </div> -->
            <!-- <div class="introduce_sec_text">
                为进一步加大对小微企业金融服务力度，满足小微企业不同发展阶段经营活动的资金需求，实现服务对象专业化精准化、批量化、差异化，出台本产品。
            </div> -->
        <!-- </div> -->
        <!-- 产品优势 -->
        <div class="introduce_three">
            <div v-for="item,index in productList" :key="index" class="introduce_three_li">
                <!-- 标题 -->
                <div class="introduce_three_title">
                    <div class="introduce_three_num">
                        {{ item.id}}
                    </div>
                    <div class="introduce_three_name">
                        {{ item.name}}
                    </div>
                </div>
                <div class="introduce_three_const">
                    {{ item.const}}
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <img src="../../assets/lnnx/icon3.png" style="height:2rem" alt="">
        <div style="margin:0.7rem 1rem 0;line-height: 3rem;">最终解释权归{{bank}}所有</div>
        <img src="../../assets/lnnx/icon4.png" style="height:2rem" alt="">
    </div>
  </div>
</template>

<script>
export default {
    name:'productHmoe',
    data() {
        return {
            bank:'辽宁农商银行',
            cs1:'',
            cs2:'',
            openid:'',
            productList:[//循环遍历展示产品介绍部分
                {
                    id:'01',
                    name:'贷款对象',
                    const:'小微企业。'
                },
                {
                    id:'02',
                    name:'贷款用途',
                    const:'满足小微企业短期生产经营和临时资金周转需求。'
                },
                {
                    id:'03',
                    name:'贷款期限',
                    const:'原则上不超过1年。'
                },
                {
                    id:'04',
                    name:'贷款利率',
                    const:'根据借款企业综合贡献度情况确定，但不得低于4%。'
                },
                {
                    id:'05',
                    name:'贷款额度',
                    const:'原则上不超过企业年流水账单基本结算账户项下进项资金合计的20%，最高贷款额度不超过300万元。'
                },
                {
                    id:'06',
                    name:'贷款方式',
                    const:'信用模式，追加借款企业法定代表人及其配偶、股东及其配偶为借款企业提供个人连带责任保证。'
                },
                {
                    id:'07',
                    name:'还款方式',
                    const:'按月付息，到期还本。'
                },
            ]
        }
    },
    created() {
        this.getInit()
        var a = '123'
        var b =  btoa(a)
        console.log('123 ', btoa(a));
        console.log('456 ', atob(b));

    },
    methods:{
        // 埋点
        getBurialPoint() {
            var that = this
            var data = {
                CstToken:that.openid,//微信OPENID
                BurTp:'2',//	埋点类型
                BsnTp:'8205',//	业务类型
                BrNo:'',  //	网点机构
                LegCd:that.cs2,    //法人机构
                CstMgrNo:that.cs1,   //	客户经理ID
                PdNo:'030113',   //	产品ID
                PdTp:'', //	产品类型
                PdNm:'助企流水贷', //	产品名称
                PdGrp:'',//	产品组
                ChnlSrc:'',         //	来源渠道
                
            }
            that.$api.UpBurialPointData(data).then(res => {
                console.log(res);
            })

        },
        getInit() {
            // this.$toast.loading({
            //     duration: 0,
            //     message: '加载中...',
            //     forbidClick: true,
            // });
            let urlMsg = '';
            console.log(window.location.href.indexOf('localhost'));
            // 16.193
            if (window.location.href.indexOf('localhost') != -1 || window.location.href.indexOf('3.1.21') != -1) {
                urlMsg =
                    'sgn=MEYCIQCZFdmhIzDq6x95RZbZHyj2cwCjAZRzQvc/Ft0o9BdoDwIhAIDpOdxylYqQFH0eRIR1sQkRveuyxfXzFGHpR5lVzfqU&data=MGY0ZTU1MGQ4ZjQyNGJlYzgwODkwNGUwY2NlOTYyYTd8MTYwNTYwNzY4ODk4NHxhMzhkNjRjMGMzYTVlYWI2fDMuMS4xNS4yMDA=&param=Wj3/trbnFBuI3jYOosEhEoPRCl9L3Ic/PGjWT/6ARf+jbA2FXfEcUAOSgNitRYrqxAMmoQoKdlnl35QN0hpWWzOCCjmx0FspUH3ABUszHQJAWFcPW1NW9sux11rv4LHEnsvBtGHMp8bH6h+2ujB/ef5SQkgi6wt8Qa5OvdGb+PNxL+/vTsjcPmPEvTiDwTzO45Xm9GAjVAYkpGDiWE8tETsCpJ2o5E7CRwA1Yuy+K1Qax07aEU/kgKDQ2Skemtcv7FcPw/F25wW/9sHcWxF0XO2IMLQ157xf0pTbaOrp7eYc/BsO6JFycvdOrQmLtu4NUIC8iplxscjOL1yhwVFqBw=&param={"Rsrv3":"111111","Rsrv2":"123456","Rsrv5":"2222"}';

            } else {
                urlMsg = decodeURIComponent(window.location.search.substr(1));
            }
            console.log(urlMsg);

            let itemObj = new Object();
            urlMsg.split('&').forEach(item => {
                itemObj[item.split('=')[0]] = item.split('=')[1];
            });
            console.log(itemObj);

            this.$api.init().then(res => {
                console.log(res);
                console.log(itemObj.param.indexOf('{'));
                if (res.Head.RspCd === '000000' && itemObj.param.indexOf('{') === -1) {
                    this.getSendMsg(res.Data.Param);
                } else if (res.Head.RspCd === '000000' && itemObj.param.indexOf('{') !== -1) {
                    this.getSendMsg(JSON.parse(itemObj.param));
                } else {
                    this.$toast({
                        title: '提示',
                        message: res.Head.RspInf
                    });
                }
            });
        },
        getSendMsg(msg) {
            let param = msg;
            this.cs1 = param.Rsrv3; // 参数1
            this.cs2 = param.Rsrv5; // 参数2
            this.openid = param.Rsrv2; // 参数3
            this.getBurialPoint()
            console.log(this.cs1);
        },
        toproduct() {
            var that = this
            that.$router.replace({
                path: "/productIndex",
                query: { id:'1',userid:this.cs1,usercode:this.cs2,openid:this.openid},
            });
            
        }
    }
}
</script>

<style scoped>
.bgc {
    position:fixed;
    width: 100%;
    height: 100%;
    background: url('../../assets/lnnx/bgc.png') no-repeat;
    background-size: 100% 100%;
    overflow-y: auto;
}
.logo {
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    position: relative;
}
.icon {
    width: 4rem;
    height: 4rem;
    position:absolute;
    bottom: -10%;
    left: 40%;
    background: url('../../assets/lnnx/icon2.png') no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}
.btn {
    position: relative;
    top: -2rem;
    width: 90%;
    height: 17rem;
    margin: 0 auto;
    background: rgba(255,255,255,.5);
    border-radius: 0.5rem;
    border: 0.1rem solid #fff;
    z-index: 2;
}
.title {
    width: 90%;
    color: rgb(16, 32, 86);
    font-size: 1.5rem;
    text-align: center;
    font-family:'HarmonyOS Sans SC';
    font-weight: 700;
    margin: 1rem auto 0;
}
.aum {
    width: 90%;
    height: 4rem;
    font-size: 3rem;
    text-align: center;
    margin: 0 auto 1rem;
    font-weight: 700;
    font-family:'D-DIN';
    color: rgb(250, 100, 1);
}
.text {
    width: 70%;
    font-size: 1.2rem;
    color: rgb(78, 89, 105);
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.submit {
    width: 90%;
    height: 4rem;
    background-color:#fa541c;
    border-radius: 25rem;
    color: #fff;
    text-align: center;
    line-height: 4rem;
    margin: 1rem auto;
    font-size: 1.4rem;
    font-weight: 700;
}
.introduce {
    width: 90%;
    margin: 0 auto 0 ;
    background: rgba(255,255,255,.5);
    border-radius: 0.5rem;
    border: 0.1rem solid #fff;
    padding: 1rem 0;
    margin-bottom: 1rem;
}
.introduce_first {
    width: 100%;
    height: 4.6rem;
    line-height: 4.6rem;
    font-size: 1.8rem;
    text-align: center;
    color: #000;
    font-weight: 700;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.introduce_first img {
    margin-bottom: 1rem;

}
.introduce_sec {
    width: 90%;
    height: 8rem;
    margin: 1rem auto 0;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 0.8rem;
    box-shadow: 0.5rem 0.5rem 0 rgba(76, 118, 254, 0.3);
    position: relative;
    padding-top: 0.2rem;
}
.icon5 {
    width: 2.8rem;
    height: 2.5rem;
    position: absolute;
    bottom: -2rem;
    right: 12%;
}
.introduce_sec_text {
    width: 90%;
    color: rgb(78, 89, 105);
    text-indent: 2em;
    margin: 1.5rem auto 0;
}
.introduce_three {
    width:90%;
    margin: 2rem auto 0;
}
.introduce_three_li {
    width: 100%;
    padding: 2rem 0;
    border-bottom: 0.1rem solid rgb(209, 220, 255);
}
.introduce_three_li:last-child {
    border-bottom: 0
}
.introduce_three_title {
    width: 100%;
    height: 3.3rem;
    display: flex;
    line-height: 4rem;
}
.introduce_three_num {
    width: 4.2rem;
    height: 3.3rem;
    line-height: 3.3rem;
    color: #fff;
    font-size: 1.5rem;
    background-color: #fa541c;
    text-align: center;
    border-radius: 1.8rem 0 0 0;
}
.introduce_three_name {
    width: 9rem;
    height: 3.3rem;
    line-height: 3.3rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 0 1.8rem 1.8rem 0;
    background:linear-gradient(to right, #feb47b,#ff7e5f);
    padding-right: 1rem;

}
.introduce_three_const {
    width: 90%;
    color: rgb(78, 89, 105);
    font-size: 1.4rem;
    margin: 1rem auto 0;
}
.footer {
    width: 90%;
    height: 3rem;
    margin: 0 auto 2rem;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    font-size: 1.3rem;
    color: rgb(78, 89, 105);
}
</style>